import React, { Component } from 'react';
import './style.css'
import {withRouter} from 'react-router-dom'

class SongHeader extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
        }
    }
    
    // componentWillReceiveProps(nextProps){
    //     console.log(nextProps);
    // }

    
    render() {
        // console.log('头部接收的数据',this.props.msg);
        return (
            <div className="song-header-all">
                <div className="box"></div>
                <div className="song-header">
              <div className="song-head" >
                    <div className="song-nav">
                        <h3>
                            <span className="song-back icon-xitongfanhui iconfont" onClick={()=>this.props.history.go(-1)}></span>
                            <span className="song-nav-title">歌单</span>
                        </h3>
                    </div>
                    {this.props.msg ? <div className="song-container">
                        <div className="song-container-left">
                            <img src={this.props.msg.coverImgUrl} alt="" />
                        </div>
                        <div className="broadcast"><span className="iconfont icon-yinletianchong"></span>{this.props.msg.trackCount}万</div>
                        <div className="song-container-right">

                            <p className="song-container-right-name">{ this.props.msg.name}</p>
                            <p>
                                <img src={this.props.msg.creator.avatarUrl} alt="" />
                                {this.props.msg.creator.nickname}</p>
                        </div>
                        <div className="song-container-backgroundImg">
                            <img src={this.props.msg.coverImgUrl } alt="" />
                        </div>
                    </div>:null}
                
                    <div className="ico-select">
                        <div>
                            <span className="iconfont icon-pinglun"></span>
                            <p>评论</p>
                        </div>
                        <div>
                            <span className="iconfont icon-dianzan"></span>
                            <p>点赞</p>
                        </div>
                        <div>
                            <span className="iconfont icon-jiahao"></span>
                            <p>收藏</p>
                        </div>
                        <div>
                            <span className="iconfont icon-androidgengduo"></span>
                            <p>更多</p>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        );
    }
}

export default withRouter(SongHeader);